<template>
	<view class="content bg-img bg-mask ">
		<u-navbar :title="i18n.dpstCertificate.i1" background="rgba(0,0,0,0)" back-icon-color="#fff" title-color="#fff"></u-navbar>

		<view class="" :style="[{ height: 70 + 'rpx' }]"></view>
		<view class="scroll">
			<block>
				<view class="flex head  f30">
					<text class="f-1 flex justify-center">{{ i18n.dpstCertificate.i2 }}</text>
					<text class="f-1 flex justify-center">{{ i18n.dpstCertificate.i3 }}</text>
					<text class="f-1 flex justify-center">{{ i18n.dpstCertificate.i4 }}</text>
				</view>
				<view v-for="(item, index) in data" :key="index" class="padding-tb-sm  list f25 r flex  ">
					<text class="f-1 flex justify-center">{{ addrr(uid) }}</text>
					<text class="f-1 flex justify-center" style="white-space: nowrap;">{{ item.createtime | dateFormat }}</text>
					<text class="f-1 flex justify-center">{{ item.pec }}</text>
				</view>
			</block>
		</view>

		<w-loading :text="i18n.pec.i18" mask="true" click="true" ref="loading"></w-loading>
	</view>
</template>

<script>
export default {
	data() {
		return {
			CustomBar: this.CustomBar,
			page: 1,
			rows: 10,
			data: [],
			total: false,
			uid: uni.getStorageSync('uid'),
		};
	},
	computed: {
		i18n() {
			return this.$t('message');
		},
	},
	onLoad() {
		var obj = setInterval(() => {
			if (window.tronWeb) {
				clearInterval(obj);
				this.exchangeComputingPower();

				this.show = true;
			} else {
				this.show = false;
			}
		}, 20);
	},
	methods: {
		addrr(e) {
			console.log('e :>> ', e);
			if (e) {
				return e.substring(0, 4) + '****' + e.substring(e.length - 4);
			}
		},
		async exchangeComputingPower() {
			this.$refs.loading.open();
			let obj = {
				page: this.page,
				rows: this.rows,
			};
			const res = await this.$u.post('/index.php/api/pec/drawLog', obj, { token: uni.getStorageSync('token') });

			setTimeout(() => {
				this.$refs.loading.close();

				if (res.data.total) {
					this.data = res.data.list;
				} else {
					this.total = true;
				}
			}, 500);
		},
	},
	filters: {
		dateFormat(originVal) {
			var originVal = Number(originVal) * 1000;
			const dt = new Date(originVal);

			const y = dt.getFullYear();
			const m = (dt.getMonth() + 1 + '').padStart(2, '0');
			// this.m = m;
			const d = (dt.getDate() + '').padStart(2, '0');
			const hh = (dt.getHours() + '').padStart(2, '0');
			const mm = (dt.getMinutes() + '').padStart(2, '0');
			const ss = (dt.getSeconds() + '').padStart(2, '0');
			// ${hh}:${mm}:${ss}
			return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	background-image: url(../../static/gern.png);
	.scroll {
		height: calc(100vh - 80rpx);
		overflow: scroll;
	}
	.head {
		margin-top: 90rpx;
		color: #f0f0f0;
		width: 702rpx;
		margin: 0 auto;
		margin-bottom: 50rpx;
	}
	.list {
		width: 702rpx;
		background: rgba(14, 16, 16, 0.44);
		color: #b3b3b3;
		margin: 0 auto;
		margin-bottom: 20rpx;
	}
}
</style>
